<template>
	<view class="waterfall">
		<view class="left" v-if="leftList[0]">
			<view v-for="(item, index) in leftList" :key="index" @click="emits('click',item)">
				<u-image showLoading lazyLoad :src="`https://picsum.photos/360/200?id=${item}`" width="100%" height="350rpx" />
				<text class="ellipsis">没错没错没错没错</text>
				<view class="align-center fs20 base-price">
					<text>¥</text>
					<text class="fs28">1999</text>
				</view>
			</view>
		</view>
		<view class="right" v-if="rightList[0]">
			<view v-for="(item, index) in rightList" :key="index" @click="emits('click',item)">
				<view class="waterfall-item">
					<u-image showLoading lazyLoad :src="`https://picsum.photos/360/200?id=${item}`" width="100%"
						height="350rpx" />
					<text class="ellipsis">没错没错没错没错</text>
					<view class="align-center fs20 base-price">
						<text>¥</text>
						<text class="fs28">1999</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script setup>
	import {
		watch
	} from 'vue';
	name: 'waterfall-card'
	import {
		onLoad,
	} from "@dcloudio/uni-app";
	import {
		ref
	} from "vue";
	const emits = defineEmits(['click'])
	const props = defineProps({
		list: {
			type: Array,
			default: () => []
		},
	})
	const leftList = ref([]) //左边列表
	const rightList = ref([]) //右边列表
	const itemIndex = ref(0)
	const leftHeight = ref(0)
	const rightHeight = ref(0)
	//第一张图片入栈
	leftList.value = [props.list[0]];
	watch(() => props.list, (n, o) => {
		// console.log('=====watch  list=====', n, o);
		let ol = o.length;
		let nl = n.length;
		// console.log(ol);
		if (nl > ol) {
			if (leftHeight.value > rightHeight.value) {
				rightList.value.push(props.list[ol]);
			} else {
				leftList.value.push(props.list[ol]);
			}
			onImageLoad();
		}
	})
	const onImageLoad = (e) => {
		if (!e) {
			// console.log('无图片！！！！');
			return;
		}
		let imgH = (e.detail.height / e.detail.width) * 345 + 110 + 20; //图片显示高度加上下面的文字的高度110rpx,加上margin-bottom20rpx
		if (itemIndex.value === 0) {
			leftHeight.value += imgH; //第一张图片高度加到左边
			itemIndex.value++;
			rightList.value.push(props.list[itemIndex.value]); //第二张图片先入栈
		} else {
			itemIndex.value++;
			//再加高度
			if (leftHeight.value > rightHeight.value) {
				rightHeight.value += imgH;
			} else {
				leftHeight.value += imgH;
			}
			if (itemIndex.value < props.list.length) {
				//下一张图片入栈
				if (leftHeight.value > rightHeight.value) {
					rightList.value.push(props.list[itemIndex.value]);
				} else {
					leftList.value.push(props.list[itemIndex.value]);
				}
			}
		}
	}
</script>


<style lang="scss">
	.waterfall {
		width: 100%;
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 20rpx;

		.left,
		.right {
			.waterfall-item {
				width: 100%;
				margin-bottom: 20rpx;
				box-sizing: border-box;
				border-radius: 10rpx;
				overflow: hidden;
				font-size: 24rpx;
				background: #fff;
				position: relative;
				animation: zoom .8s;

				image {
					width: 100%;
					display: block;
					border-radius: 10rpx;
				}

				@keyframes zoom {
					0% {
						transform: scale(.5);
						opacity: 0;
					}

					100% {
						transform: scale(1);
						opacity: 1;
					}
				}
			}
		}
	}
</style>